<template>
  <div class="add-survey-container">
    <!-- 页面标题 -->
    <div class="page-header">
      <h1>创建调查问卷</h1>
      <p>设置问卷基础信息并开始设计您的调查问卷</p>
    </div>

    <!-- 分类管理区域 -->
    <a-card class="category-card" title="问卷分类管理">
      当前{{ categories.length }}个分类
      <div class="category-header">
        <a-button type="primary" @click="handleOpenCategoryModal()">
          添加分类
        </a-button>
      </div>

      <!-- 分类列表 -->
      <a-list v-if="categories.length > 0" item-layout="horizontal" :data-source="categories" class="category-list" :loading="false">
        <template #renderItem="{ item }">
          <a-list-item>
            <a-list-item-meta :title="item.name" :description="`问卷数量：${item.surveyCount || 0}`" />
            <div class="list-actions">
              <a-button size="small" danger @click="handleDeleteCategory(item)">
                删除
              </a-button>
              <a-button size="small" type="primary" @click="handleEditCategory(item)">
                编辑
              </a-button>
            </div>
          </a-list-item>
        </template>
      </a-list>

      <!-- 空状态 -->
      <a-empty v-else description="暂无分类，请添加分类后创建问卷" />
    </a-card>

    <!-- 分类模态框（添加/编辑） -->
    <a-modal v-model:open="showCategoryModal" :title="isEdit ? '编辑分类' : '新增分类'" :confirm-loading="confirmLoading" @ok="handleSubmitCategory" @cancel="handleCancelCategory" destroyOnClose :maskClosable="true">
      <!-- 分类表单 -->
      <a-form :model="categoryForm" :rules="categoryRules" ref="categoryFormRef" layout="vertical" :labelCol="{ span: 6 }" :wrapperCol="{ span: 16 }">
        <!-- 1. 分类ID（随机生成，禁用） -->
        <a-form-item label="分类ID" name="category_id" tooltip="系统自动生成的唯一标识，不可修改">
          <a-input v-model:value="categoryForm.category_id" disabled placeholder="系统生成中..." readonly :max-length="32" />
        </a-form-item>

        <!-- 2. 分类名称（用户输入，必填） -->
        <a-form-item label="分类名称" name="name" tooltip="请输入清晰易懂的分类名称（如：电子产品、图书）">
          <a-input v-model:value="categoryForm.name" placeholder="请输入分类名称" :max-length="50" show-count />
        </a-form-item>

        <!-- 3. 分类描述（可选） -->
        <a-form-item label="分类描述" name="description">
          <a-textarea v-model:value="categoryForm.description" placeholder="请输入分类描述（选填）" :rows="3" :max-length="200" show-count />
        </a-form-item>

        <!-- <a-color-picker v-model="color" /> -->

        <!-- 4. 分类状态（启用/禁用） -->
        <a-form-item label="状态" name="status">
          <a-switch v-model:checked="categoryForm.status" checked-children="启用" un-checked-children="禁用" default-checked />
          <span style="margin-left: 8px; color: #666;">
            {{ categoryForm.status ? '启用后可在前台展示' : '禁用后将隐藏该分类' }}
          </span>
        </a-form-item>

        <!-- 5. 排序号（控制展示顺序） -->
        <a-form-item label="排序号" name="sort" tooltip="数值越小，展示越靠前（默认0）">
          <a-input-number v-model:value="categoryForm.sort" :min="0" :max="999" :step="1" placeholder="0" style="width: 100%;" />
        </a-form-item>

        <!-- 6. 创建时间（仅编辑时显示，禁用） -->
        <a-form-item label="创建时间" name="createTime" v-if="isEdit">
          <a-input v-model:value="categoryForm.createTime" disabled readonly />
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>
<script setup>
import { ref, reactive, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { message, Modal } from 'ant-design-vue'
import { v4 as uuidv4 } from 'uuid'
import axios from 'axios'

// 路由实例
const router = useRouter()

// 分类列表数据
const categories = ref([])

// 模态框状态
const showCategoryModal = ref(false)
const isEdit = ref(false) // 区分新增/编辑
const confirmLoading = ref(false)
const categoryFormRef = ref(null) // 表单引用

// 分类表单数据（统一对象，避免冗余）
const categoryForm = reactive({
  category_id: '', // 系统生成的唯一标识
  name: '', // 分类名称（与rules对应）
  description: '', // 描述
  iconColor: '',
  status: true, // 状态
  survey_count: 0,
  sort: 0, // 排序号
  createTime: '' // 创建时间
})

// 分类表单验证规则（与表单字段对应）
const categoryRules = reactive({
  name: [
    { required: true, message: '请输入分类名称', trigger: 'blur' },
    { max: 50, message: '分类名称不能超过50个字符', trigger: 'blur' },
    { pattern: /^[^<>:\"\\/|?*]+$/, message: '名称不能包含特殊字符', trigger: 'blur' }
  ],
  category_id: [
    { required: true, message: '分类ID生成失败，请重试', trigger: 'change' }
  ]
})

// 接口基础地址
const api = import.meta.env.VITE_API_BASE_URL

onMounted(async () => {
  // 初始化加载分类数据
  await loadCategories()
})

// 加载分类列表
const loadCategories = async () => {
  try {
    const response = await axios.get(api + '/get_questionnaire_categories.php')
    console.log('接口返回数据：', response.data)

    if (response.data.code === 200 && response.data.data) {
      // 映射接口数据到组件所需格式
      categories.value = response.data.data.map(item => ({
        id: item.category_id, // 使用 category_id 作为 id
        category_id: item.category_id, // 保留原始字段
        name: item.name,
        description: item.description,
        status: item.status !== undefined ? item.status : true,
        sort: item.sort || 0,
        surveyCount: item.survey_count || 0, // 问卷数量，如果接口没有则默认为0
        createTime: item.createTime || item.created_at || ''
      }))
      console.log('处理后的分类数据：', categories.value)
    } else {
      message.warning('暂无分类数据')
      categories.value = []
    }
  } catch (error) {
    console.log('获取分类失败：', error)
    message.error('获取分类数据失败')
    categories.value = []
  }
}

// 打开分类模态框（新增）
const handleOpenCategoryModal = () => {
  isEdit.value = false
  // 重置表单并生成新ID
  resetCategoryForm()
  categoryForm.category_id = 'cat_' + uuidv4().replace(/-/g, '').slice(0, 16) // 生成带前缀的ID
  showCategoryModal.value = true
}

// 编辑分类：回显数据
const handleEditCategory = (item) => {
  isEdit.value = true
  showCategoryModal.value = true
  // 复制item数据到表单（避免直接修改源数据）
  Object.assign(categoryForm, {
    ...item,
    createTime: item.createTime || new Date().toLocaleString() // 补全创建时间
  })
}

const handleDeleteCategory = async (item) => {
  try {
    // 确认删除
    const confirmed = await new Promise((resolve) => {
      Modal.confirm({
        title: '确认删除',
        content: `确定要删除分类“${item.name}”吗？此操作不可恢复。`,
        okText: '确定',
        cancelText: '取消',
        onOk: () => resolve(true),
        onCancel: () => resolve(false)
      })
    })

    if (!confirmed) return

    // 发送删除请求
    const response = await axios.post(api + '/delete_questionnare_category.php', {
      category_id: item.category_id
    })

    if (response.data.code === 200) {
      message.success('分类删除成功')
      // 重新加载分类列表
      await loadCategories()
    } else {
      message.error(response.data.message || '删除分类失败')
    }
  } catch (error) {
    console.error('删除分类失败：', error)
    message.error('删除分类失败：' + (error.response?.data?.message || error.message))
  }
}

// 提交分类（新增/编辑）
const handleSubmitCategory = async () => {
  if (!categoryFormRef.value) return

  try {
    confirmLoading.value = true
    // 表单验证
    await categoryFormRef.value.validate()

    if (isEdit.value) {
      // 编辑逻辑：发送更新请求
      await updateCategory()
    } else {
      // 新增逻辑：发送创建请求
      await createCategory()
    }

    // 关闭模态框
    showCategoryModal.value = false
    // 重新加载分类列表
    await loadCategories()
  } catch (error) {
    console.error('操作失败：', error)
  } finally {
    confirmLoading.value = false
  }
}

// 新增分类API请求
const createCategory = async () => {
  try {
    const response = await axios.post(api + '/create_questionnare_category.php', {
      category_id: categoryForm.category_id,
      name: categoryForm.name,
      description: categoryForm.description,
      status: categoryForm.status ? 1 : 0,
      sort: categoryForm.sort
    })
    console.log(response)
    if (response.data.code === 200) {
      message.success('分类添加成功')
    } else {
      message.error(response.data.message || '添加分类失败')
      throw new Error(response.data.message)
    }
  } catch (error) {
    message.error('添加分类失败：' + (error.response?.data?.message || error.message))
    throw error
  }
}

// 更新分类API请求
const updateCategory = async () => {
  try {
    const response = await axios.post(api + '/update_questionnare_category.php', {
      category_id: categoryForm.category_id,
      name: categoryForm.name,
      description: categoryForm.description,
      status: categoryForm.status ? 1 : 0,
      sort: categoryForm.sort
    })
    console.log(response)
    if (response.data.code === 200) {
      message.success('分类更新成功')
    } else {
      message.error(response.data.message || '更新分类失败')
      throw new Error(response.data.message)
    }
  } catch (error) {
    message.error('更新分类失败：' + (error.response?.data?.message || error.message))
    throw error
  }
}

// 取消分类操作
const handleCancelCategory = () => {
  resetCategoryForm()
  showCategoryModal.value = false
}

// 重置分类表单
const resetCategoryForm = () => {
  categoryFormRef.value?.resetFields()
  // 重置基础字段
  categoryForm.category_id = ''
  categoryForm.name = ''
  categoryForm.description = ''
  categoryForm.sort = 0
  categoryForm.createTime = ''
  categoryForm.status = true
}

// 回退到问卷列表
const goBack = () => {
  router.push('/surveyList')
}
</script>

<style scoped>
.add-survey-container {
  max-width: 1000px;
  margin: 0 auto;
  padding: 24px;
}

.page-header {
  margin-bottom: 32px;
}

.page-header h1 {
  margin: 0 0 8px 0;
  font-size: 24px;
  font-weight: 500;
}

.page-header p {
  margin: 0;
  color: #666;
  font-size: 14px;
}

.category-card {
  margin-bottom: 32px;
}

.category-header {
  margin-bottom: 16px;
  text-align: right;
}

.category-list {
  border-top: 1px solid #f0f0f0;
  padding-top: 16px;
}

/* 列表操作区样式 */
.list-actions {
  display: flex;
  gap: 8px;
}

/* 优化空状态样式 */
:deep(.ant-empty) {
  margin: 40px 0;
}

.add-survey {
  padding: 20px;
}
</style>